<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        input {
            width: 20px;
            text-align: center;
            border: none;
        }

        input#year {
            width: 40px;
        }

        input[type="range"] {
            display: block;
            width: 40%;
        }

        .flex-center {
            width: 600px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 9px;

            font-size: 14px;
        }

        .vilid-fail {
            border: 1px solid red !important;
        }

        .rangeContainer {
            width: 300px;
            padding: 4px;
            height: 20px;
            line-height: 18px;
            /* vertical-align:middle; */
            border-radius: 999999px;
            border: 1px solid #aaa;
        }
    </style>
</head>
<body>
    <h1>滑块 时间点</h1>
    <div>
        <div class="flex-center">
            <span id="start"></span>
            <input type="range" id="rangeInput" step="1000">
            <span id="end"></span>
        </div>

        <div class="rangeContainer">
            <input type="text" id="year" maxlength="4" name="" value="">-
            <input type="text" id="month" maxlength="2" name="" value="">-
            <input type="text" id="day" maxlength="2" name="" value="">
            <input type="text" max="23" maxlength="2" min="0" id="hour" name="" value=""> :
            <input type="text" max="59" maxlength="2" min="0" id="minute" name="" value=""> :
            <input type="text" max="59" maxlength="2" min="0" id="second" name="" value="">
        </div>
    </div>
    <script type="module" src="./homework.js"></script> // type="module" 保证局部变量
</body>
</html>